<template>
  <div>
    <!--name这个ref 引用对象在使用时不需要加value,vue3会自动帮你加value,所以可以拿到值-->
    <p>{{ name }}--{{ age }}</p>
    <p>{{ job.type }}--{{ job.salary }}</p>
    <p v-for="(item, index) in test.name" :key="index">{{ item }}</p>
    <p @click="change">说话</p>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"; // 引入响应式函数ref

let name = ref("张三222221111"); //返回一个 ref 引用对象
let age = ref(20);
console.log(name);
// 当ref传的参数为对象时
let job = ref({
  type: "前端工程师",
  salary: "20k",
});
const test = reactive({
  name: [1, 2, 3],
});
const test3 = reactive({
  name: [4, 5, 6],
});
const test2 = () => {
  console.log(test.concat(test3));
  return;
};
const change = () => {
  name.value = "李四"; // ref对象.value 修改其值
  age.value = 30;
  job.value.type = "后端开发工程师";
  job.value.salary = "30k";
  test2();
};
</script>
